<script setup>
import { useRouter } from 'nuxt/app'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const router = useRouter()
const user = useState('auth-user', () => null)
function navigate (uri) {
  router.push(uri)
}

const items = computed(() => [
    { label: t('menu.dashboard'), onclick: () => router.push('/secure/dashboard')},
    { label: t('menu.profile'), onclick: () => router.push('/secure/profile')},
    { label: t('menu.changePassword'), onclick: () => router.push('/secure/password')},
    {},
    { label: t('menu.logout'), onclick: () => router.push('/secure/logout')},
])

</script>

<template>
    <div style="display: flex;align-items: center;">
      <NButton v-if="!user" type="primary" size="large" to="/login">{{ $t('menu.login') }}</NButton> 
    <NDropdownMenu 
      v-else
      :items
      :modal="false"
      :_dropdown-menu-content="{
        class: 'w-60',
        align: 'end',
        side: 'top',
      }"
    >
      <NButton
        btn="ghost-gray square"
        v-if="user?.avatar"
      >
        <NAvatar
          square="6"
          :src="user.avatar"
        />
      </NButton>
      <NButton
        btn="ghost-gray square"
        v-else
      >
      <NAvatar :label="user.email.charAt(0).toUpperCase()" square="6" avatar="outline-primary" class="text-white" />
      </NButton>
      <template #menu-label>
        <div class="flex flex-col items-start">
          <span class="text-accent font-semibold leading-5">{{user.name}}</span>
          <span class="text-xs text-muted">{{user.email}}</span>
        </div>
      </template>
    </NDropdownMenu>
    </div>
</template>